<template>
  <div>
    <p class="title">商城详情</p>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <div class="box1">
            <div>
              <span>门店名称：</span>
              <span>{{info.storeName}}</span>
            </div>
            <div>
              <span>门店类型：</span>
              <span>{{info.stName}}</span>
            </div>
            <div>
              <span>地址：</span>
              <span>{{info.storeAddress}}</span>
            </div>
            <div>
              <span>门店电话：</span>
              <span>{{info.storeMobile}}</span>
            </div>
            <div>
              <span>营业时间：</span>
              <span>{{info.husinessHours}}</span>
            </div>
            <div></div>
            <div class="img">
              <span>门店封面：</span>
              <span class="imgs">
                <img v-for="item in info.cover" :src="item" alt="" />
              </span>
            </div>
          </div>
          <div class="box2">
            <h3>门店简介</h3>
            <div class="box3" v-html="info.intro">

            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="优惠券" name="second">
          <div class="headerbox">
            <div class="box11">
              <div>
                <span>状态：</span>
                <el-select v-model="state" @change="getStoreCoupon" size="small" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div>
              <div class="box12">
                <el-button type="primary" size="small" @click="dialogVisible3 = true">新建</el-button>


              </div>
            </div>
          </div>
          <el-table ref="multipleTable" :data="couponList" tooltip-effect="dark" style="width: 100%" border>
            <el-table-column label="序号" type="index" align="center" width="80">
            </el-table-column>
            <el-table-column prop="couponId" label="优惠券编码" align="center">

            </el-table-column>

            <el-table-column prop="couponName" label="名称" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="有效期" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.effStartTime|formDate}}-{{scope.row.effEndTime|formDate}}
              </template>
            </el-table-column>
            <el-table-column prop="couponNumber" label="数量" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="soldNumber" label="已售" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="couponPrice" label="价格" align="center" show-overflow-tooltip>
            </el-table-column>

            <el-table-column label="状态" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.state==1 ">上架</span>
                <span v-else-if="scope.row.state==1 ">下架</span>

              </template>
            </el-table-column>
            <el-table-column width="300px" label="操作" align="center">
              <template slot-scope="scope">

                <el-button type="text" @click="ck">查看</el-button>



                <el-button type="text" @click="addStoreNum">添加库存</el-button>

                <el-button type="text" @click="storeLog(scope.row.couponId)">库存记录</el-button>


                <el-button type="text" v-if="scope.row.state == 1" @click="down">下架</el-button>
                <el-button type="text" v-else-if="scope.row.state == 2" @click="up">上架</el-button>

              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="购买记录" name="third">
          <!-- 购买记录 -->
          <div class="headerbox">
            <div class="box21">
              <div class="zt">
                <span>状态：</span>
                <el-select v-model="value21" placeholder="请选择">
                  <el-option v-for="item in options21" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-button-group>
                  <el-button type="info">今天</el-button>
                  <el-button type="info">近7天</el-button>
                  <el-button type="info">近30天</el-button>
                </el-button-group>
              </div>

              <div>
                <el-date-picker v-model="value22" type="daterange" unlink-panels range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </div>
            <div>
              <div class="box31 el-icon-search">
                <input v-model="input21" placeholder="搜索用户昵称/手机号" />
              </div>
            </div>
            <div>
              <el-button type="primary">导出</el-button>
            </div>

          </div>

          <div class="table">
            <el-table :data="tableDatabuy" border style="width: 100%">
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>

              <el-table-column prop="num" label="优惠券编号" width="180">
              </el-table-column>
              <el-table-column prop="name" label="名称">
              </el-table-column>
              <el-table-column prop="price" label="价格">
              </el-table-column>
              <el-table-column prop="paytime" label="支付时间">
              </el-table-column>
              <el-table-column prop="userphone" label="用户账号">
              </el-table-column>
              <el-table-column prop="username" label="用户昵称">
              </el-table-column>
              <el-table-column prop="autd" label="是否认证">
              </el-table-column>
              <el-table-column prop="autonym" label="实名">
              </el-table-column>
              <el-table-column prop="idcard" label="身份证号">
              </el-table-column>
              <el-table-column prop="paytype" label="支付方式">
              </el-table-column>
            </el-table>
            <Page :total="total" :PageNumber.sync="pageNumber" :PageSize.sync="pageSize"
              @current-change="changeCurrentPage" @size-change="handleSizeChange">
            </Page>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 新建弹框 -->
      <el-dialog title="新建优惠券" :visible.sync="dialogVisible3" width="50%">
        <h3>优惠券信息：</h3>
        <el-form :model="form" label-width="150px">
          <el-form-item prop="" label="优惠券名称：">
            <el-input v-model="form.couponName" size="small"></el-input>
          </el-form-item>
          <el-form-item prop="" label="有效期：">
            <div class="flex">
              <el-date-picker v-model="date" formData size="small" type="daterange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间">
              </el-date-picker>

            </div>
          </el-form-item>
          <div class="flex">
            <el-form-item prop="" label="价格类型：">
              <el-radio-group v-model="form.priceType">
                <el-radio :label="1">免费</el-radio>
                <el-radio :label="2">付费</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="couponPrice" label="价格：">
              <el-input v-model="form.couponPrice" size="small"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item prop="" label="是否设置钻石抵扣">
              <el-radio-group v-model="form.whetherDeduction">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="deductionNumber" label="钻石抵扣数量：">
              <el-input v-model="form.deductionNumber" size="small"></el-input>
            </el-form-item>
          </div>
          <el-form-item prop="couponNumber" label="优惠券个数：">
            <el-input v-model="form.couponNumber" size="small"></el-input>
          </el-form-item>
          <el-form-item prop="instructions" label="使用说明：">
            <RichText :content="form.instructions" />
          </el-form-item>
          <el-form-item prop="purchInfor" label="购买须知：">
            <RichText :content="form.purchInfor" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible3 = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogVisible3 = false" size="small">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看弹框 -->
      <el-dialog title="查看" :visible.sync="dialogVisible1" width="50%" :before-close="handleClose">
        <div class="chakan">
          <p>
            <span>名称：</span>
            <span>0000000000000</span>
          </p>
          <p>
            <span>有效期：</span>
            <span>0000000000000</span>
          </p>
          <p>
            <span>价格类型：</span>
            <span>0000000000000</span>
          </p>
          <p>
            <span>价格：</span>
            <span>0000000000000</span>
          </p>
          <p>
            <span>是否设置钻石抵扣：</span>
            <span>0000000000000</span>
          </p>
          <p>
            <span>钻石抵扣数：</span>
            <span>0000000000000</span>
          </p>
          <p>
            <span>使用说明：</span>
            <span>0000000000000</span>
          </p>
          <p>
            <span>购买须知：</span>
            <span>0000000000000</span>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible4 = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible4 = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 添加库存弹框 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <div class="addnum">
          <span>添加数量：</span>
          <el-input v-model="addmun" placeholder="请输入内容"></el-input>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 库存记录弹框 -->
      <el-dialog title="库存记录" :visible.sync="isShowInventory" center width="50%">
        <el-table :data="tableDatalog">
          <el-table-column prop="date" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="num" label="当前数量" align="center">
          </el-table-column>
          <el-table-column prop="add" label="添加数量" align="center">
          </el-table-column>
          <el-table-column prop="addpeople" label="添加人" align="center">
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="isShowInventory = false">取 消</el-button>
          <el-button size="small" type="primary" @click="isShowInventory = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Page from "@/components/page.vue";
  import RichText from "@/components/RichText.vue";
  import apis from "@/apis/modules/store"

  export default {
    components: {
      RichText, Page
    },
    filters: {
      // 格式化时间
      formDate(value) {
        console.log(value.split(' ')[0])
        return value.split(' ')[0].replace(/-/g, '/')
      }
    },
    data() {
      return {
        storeId: "",//门店ID
        info: {},//门店信息
        pageNumber: 1,//当前页数
        pageSize: 10,//每页显示多少条
        total: 0,//总数
        state: "all",//状态
        isShowInventory: false,//是否显示库存记录
        couponList: [],//优惠券列表
        inventoryList: [],//库存列表
        form: {
          storeId: "",//	门店id
          couponName: "",//	优惠卷名称
          effStartTime: "",//	有效开始时间
          effEndTime: "",//	有效结束时间
          priceType: "",//	价格类型 1 付费 2 免费
          couponPrice: "",//	价格
          whetherDeduction: "",//	是否设置钻石抵扣 1 是 2 否
          deductionNumber: "",//	钻石抵扣数量 1元/100钻石
          couponNumber: "",//	数量
          instructions: "",//	使用说明
          purchInfor: "",//	购买须知
        },//优惠券信息
        options: [
          {
            value: "all",
            label: "全部",
          },
          {
            value: "1",
            label: "上架",
          },
          {
            value: "2",
            label: "下架",
          },

        ],//状态
        // 购买纪律
        value21: "",
        value22: "",
        input21: "",
        options21: [
          {
            value: "全部",
            label: "全部",
          },
          {
            value: "待支付",
            label: "待支付",
          },
          {
            value: "已完成",
            label: "已完成",
          },
          {
            value: "已过期",
            label: "已过期",
          },
        ],
        // 新建input value
        input11: " ",
        input12: " ",
        input13: " ",
        input14: " ",
        input15: " ",
        radio1: "",
        radio2: "",
        //
        addmun: "", //添加数量
        dialogVisible: false,
        isShowInventory: false,
        dialogVisible3: false,
        dialogVisible4: false,
        activeName: "first",

        value: "",

        tableDatalog: [

        ],
        //   购买记录
        tableDatabuy: []
      };
    },

    created() {
      this.storeId = this.$route.query.storeId;
      this.showStore()
    },
    methods: {
      // 查询门店详情
      async showStore() {
        const { code, data, msg } = await apis.showStore({
          storeId: this.storeId
        })
        if (code == 200) {

          this.info = data;
          this.info.cover = data.cover.split(',')
          console.log(this.info.cover)
        }
      },
      // 获取优惠券列表
      async getStoreCoupon() {
        const { code, data, msg } = await apis.getStoreCoupon({
          storeId: this.storeId,
          state: this.state,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        if (code == 200) {
          this.total = data.count;
          this.couponList = data.list;
        }
      },
      storeLog(couponId) {
        this.isShowInventory = true;
        this.getStoreCouponRecord(couponId)
      },
      // 获取库存记录
      async getStoreCouponRecord(couponId) {
        const { code, data, msg } = await apis.getStoreCouponRecord({
          couponId
        })
        if (code == 200) {

          this.inventoryList = data;
        }
      },

      //改变当前页数
      changeCurrentPage(val) {
        console.log(val);
      },
      //改变每页显示条数
      handleSizeChange(val) {
        console.log(val);
      },
      // 切换tab
      handleClick(tab) {
        if (tab.index == 0) {
          this.showStore()
        } else if (tab.index == 1) {
          this.getStoreCoupon()
        } else if (tab.index == 2) {

        }

      },
      ck() {
        (this.dialogVisible4 = true), console.log(1);
      },
      // 添加库存
      addStoreNum() {
        this.dialogVisible = true;
      },
      // 库存弹窗
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => { });
      },

      down() {
        console.log("down");
      },
      up() {
        console.log("up");
      },
    },
  };
</script>

<style lang="scss" scoped>
  .title {
    margin-bottom: 32px;
  }

  .el-input {
    width: 400px;
  }



  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /deep/.el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    z-index: 1;
  }

  .box1 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 40px;

    div {
      width: 33%;
      margin-bottom: 20px;
    }
  }

  .imgs {
    margin-top: 16px;
    display: flex;

    img {
      width: 180px;
      height: 120px;
      margin-right: 20px;
    }
  }

  .box3 {
    padding: 10px 40px;

    img {
      width: 550px;
      height: 250px;
      margin-top: 20px;
      background-color: #ccc;
    }
  }

  .box12 {
    margin-bottom: 16px;
  }

  .headerbox {
    display: flex;
    justify-content: space-between;
  }

  .box11 {
    display: flex;
    justify-content: space-between;
    width: 650px;
  }



  .addnum {
    display: flex;
    justify-content: center;

    span {
      line-height: 40px;
    }

    .el-input {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 200px;
    }
  }

  .felxspan {
    width: 150px;
    text-align: right;
  }


  .felx1 {
    display: flex;
  }

  .radio {
    width: 160px;
  }

  .chakan {
    font-size: 17px;
    padding: 0 20px;
  }

  .headerbox {
    display: flex;
    justify-content: space-between;

    .box21 {
      display: flex;
      justify-content: space-between;
      width: 900px;
    }
  }

  .box31 {
    width: 180px;
    height: 32px;
    line-height: 32px;
    border-radius: 8px;
    background-color: rgb(242, 242, 242);
    display: flex;

    input {
      width: 240px;
      height: 32px;
      border-style: none;
      border-radius: 8px;
      outline: none;
      margin-left: 10px;
      background-color: rgb(242, 242, 242);
    }
  }

  .table {
    margin-top: 20px;
  }
</style>